<template>
  <div class="production-plan">
    <div class="info-header">
      <div class="info-row">
        <div class="item">
          <span class="info-label">工单号：</span>
          <span class="info-value">{{ info.orderNumber }}</span>
        </div>
        <div class="item">
          <span class="info-label">品号：</span>
          <span class="info-value">{{ info.productNumber }}</span>
        </div>
      </div>
      <div class="info-row">
        <div class="item">
          <span class="info-label">出货日期：</span>
          <span class="info-value">{{ info.deliveryDate }}</span>
        </div>
        <div class="item">
          <span class="info-label">工单数量：</span>
          <span class="info-value">{{
            info.salesOrderDocDBusinessQty ? info.salesOrderDocDBusinessQty : 0
          }}</span>
        </div>
      </div>
    </div>

    <table class="production-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>车间</th>
          <th>产线</th>
          <th>计划数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in tableData" :key="index">
          <td>{{ row.index }}</td>
          <td>
            <el-select
              v-model="row.workshop"
              style="width: 100%"
              @change="changeWshop(row, index)"
            >
              <el-option
                v-for="item in workshopList"
                :key="item.value"
                :label="item.workshopName"
                :value="item.workshopId"
                clearable
              >
              </el-option>
            </el-select>
          </td>
          <td>
            <el-select v-model="row.productionLine" style="width: 100%">
              <el-option
                v-for="item in row.productionLineList"
                :key="item.value"
                :label="item.realityLineName"
                :value="item.id"
                clearable
              >
              </el-option>
            </el-select>
          </td>
          <td>
            <el-input
              type="number"
              v-model="row.planQuantity"
              placeholder="请输入"
            />
          </td>
          <td>
            <el-button type="text" style="color: red" @click="deleteRow(index)"
              >删除</el-button
            >
          </td>
        </tr>
      </tbody>
    </table>
    <button class="add-row-btn" @click="addRow">添加行</button>
  </div>
</template>

<script>
import { workshopListByItemCode, lineListByWorkshopId } from "@/api/common";
import {
  getDocNoDetail,
  saveSchedulePlanning,
} from "@/api/workorder/workordercps";

export default {
  data() {
    return {
      info: {
        orderNumber: "",
        productNumber: " ",
        deliveryDate: " ",
        salesOrderDocDBusinessQty: "",
      },
      tableData: [
        // {
        //   index: 1,
        //   workshop: "",
        //   productionLine: "",
        //   planQuantity: "",
        // },
      ],
      workshopList: [],
      productionLineList: [],
    };
  },
  props: {
    planId: {
      type: String,
    },
    planDialogVisible: {
      type: Boolean,
    },
  },
  mounted() {
    //this.getLineLists();
  },
  watch: {
    planDialogVisible: {
      handler(val) {
        if (val) {
          this.getProductionPlanData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    changeWshop(val, index) {
      console.log("changeWshop", val);
      this.tableData[index].productionLine = null;
      this.getLineLists(val, index);
    },
    getProductionPlanData() {
      getDocNoDetail(this.planId).then(async (res) => {
        // console.log(res.data.data);
        this.info = {
          orderNumber: res.data.data.docNo, // 工单号
          productNumber: res.data.data.itemCode, // 品号
          deliveryDate: res.data.data.planShipDate, // 出货日期
          salesOrderDocDBusinessQty: res.data.data.salesOrderDocDBusinessQty, // 工单数量
        };

        this.tableData = res.data.data.linePlanningList.map((item, index) => ({
          index: index + 1,
          workshop: item.workshopId, // 车间id
          productionLine: item.lineId, // 产线id
          planQuantity: item.planQty, // 计划数量
          productionLineList: [], // 计划数量
          id: item.id,
        }));
        // 为每一行获取生产线列表
        for (let i = 0; i < this.tableData.length; i++) {
          const item = this.tableData[i];
          const lines = await this.getLineArrty(
            item.workshop,
            res.data.data.itemCode
          );
          this.$set(this.tableData, i, {
            ...item,
            productionLineList: lines,
          });
        }
        console.log(this.tableData);
        this.$forceUpdate(); //强制更新
        this.getWorkshopLists();
      });
    },
    getWorkshopLists() {
      workshopListByItemCode(this.info.productNumber).then((res) => {
        this.workshopList = res.data.data;
      });
    },
    getLineLists(wshop, index) {
      // this.tableData.map
      let data = {
        workshopId: wshop.workshop,
        itemCode: this.info.productNumber,
      };
      lineListByWorkshopId(data).then((res) => {
        this.tableData[index].productionLineList = res.data.data;
        this.$forceUpdate(); //强制更新
      });
    },
    async getLineArrty(workshopId, itemCode) {
      // this.tableData.map
      let data = {
        workshopId: workshopId,
        itemCode: itemCode,
      };
      const response = await lineListByWorkshopId(data);
      return response.data.data;
    },
    addRow() {
      const lastIndex =
        this.tableData.length > 0
          ? this.tableData[this.tableData.length - 1].index
          : 0;
      this.tableData.push({
        index: lastIndex + 1,
        workshop: "",
        productionLine: "",
        planQuantity: "",
      });
    },
    deleteRow(index) {
      this.tableData.splice(index, 1);
      // 更新序号
      this.tableData.forEach((item, idx) => {
        item.index = idx + 1;
      });
    },
    handleSubmit() {
      let data = {
        id: this.planId,
        linePlanningList: this.tableData.map((item) => ({
          id: item.id ? item.id : "", //规划数据id
          workshopId: item.workshop, //车间id
          lineId: item.productionLine, //产线id
          planQty: item.planQuantity, //计划数量
        })),
        docNo: this.info.orderNumber, //工单号
        itemCode: this.info.productNumber, //品号
        planShipDate: this.info.deliveryDate, //出货日期
        salesOrderDocDBusinessQty: this.info.salesOrderDocDBusinessQty, //工单数量
      };

      console.log("提交数据:", data);

      saveSchedulePlanning(data).then((res) => {
        this.$message({
          message: "提交成功",
          type: "success",
        });
        this.$emit("success"); // 触发父组件的success事件
      });
    },
  },
};
</script>

<style scoped lang="less">
.production-plan {
  width: 90%;
  margin: 0 auto;
  // padding: 20px;
}

.info-header {
  /* background-color: #f5f7fa; */
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  /* justify-content: space-between; */
  margin-bottom: 10px;
  .item {
    flex: 1;
  }
}

.info-label {
  font-weight: bold;
  margin-right: 5px;
}

.info-value {
  font-size: 14px;
}

.production-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.production-table th,
.production-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.production-table th {
  background-color: #f5f7fa;
}

.add-row-btn {
  background-color: #4285f4;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}

.add-row-btn:hover {
  background-color: #3367d6;
}

table input,
table select {
  width: 100%;
  padding: 4px;
}
</style>
